<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">我的积分</block>
		</cu-custom>
		
		<!-- 头像信息 begin -->
		<view v-if="isInit" class="cu-list menu-avatar">
			<view class="cu-item">			
				<view class="cu-avatar round lg" :style="'background-image:url('+userinfo.avatar+');'"></view>					
				
				<view class="content">						
					<view class="flex justify-between" v-if="userinfo.isAuth">
						<view style="display: block;">
							<view class="text-black flex">
								<text>{{userinfo.name}}
									<text class="text-sm margin-left-xs text-grey">剩余<text class="text-red margin-lr-xs">{{userinfo.gold}}</text>积分</text>
								</text>
							</view>
							<view class="text-sm" style="width: 500rpx;">
								<view class="flex align-center">						
									<view class='flex align-center'>										
										<text v-if="task==0" class="text-grey">
											 总获得<text class="text-orange margin-lr-xs">{{userinfo.totalGold}}</text>积分
										</text>										
										<text v-else class="text-grey">
											 <text class="text-blue margin-right-xs">{{taskName}}</text> 获取 <text class="text-orange margin-lr-xs">{{count}}</text>积分
										</text>										
									</view>
								</view>
							</view>
						</view>							
					</view>
				</view>
				
				<view  @tap="goLuck" class="action" style="width:150rpx;">
					<button :class="'cu-btn sm '+(hasPlayLottery?'bg-gray':'bg-orange')">
						每日抽奖
					</button>
				</view>
				
			</view>
			<uniSticky>
				<navLongTab :tabTitle="tabs" @changeTab="changeTab"></navLongTab>
			</uniSticky>
		</view>
		<!-- 头像信息 end -->
		
		<view v-if="isInit" :style="'height:'+screenHeight+'px;'">
			
			<!-- 列表部分 begin -->
			<mescroll-uni v-if="tabNow==0||tabNow==1||tabNow==2" ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
							
				<mescroll-empty v-if="list.length==0"></mescroll-empty>
				
				<view class="cu-card dynamic">
					
					<!-- 积分明细 begin -->
					
					<!-- 查询按钮 begin -->
					<view class="padding" v-if="tabNow==0">
						
						<scrollList :list="task_list" :btnIndex="taskIndex" @change="changeTask"></scrollList>
						
					</view>
					<!-- 查询按钮 end -->
					<view v-if="tabNow==0" class="cu-item shadow padding" :style="index==0?'margin-top:0px;':''" v-for="(item,index) in list" :index="index" :item="item" :key="index">
						<view class="flex justify-between">
							<view>
								<text>完成:<text :class="item.task.color">{{item.task.name}}</text></text>
								<text class="margin-left">获得积分:<text class="text-red margin-lr-xs">{{item.gold}}</text> 点</text>								
							</view>
						</view>
						<view class="text-grey margin-top-sm text-sm flex justify-between">
							<text v-if="item.task.id!=9">任务:{{item.task.descr}}</text>
							<text v-if="item.task.id==9">任务:您从推广用户 [ {{item.ext.name}} ] 获得的积分提成。</text>
						</view>
						<text class="text-grey margin-top-sm text-sm" style="display: inline-block;">
							完成时间 : [{{item.createTime}}]
						</text>
					</view>
					<!-- 积分明细 end -->
						
					<!-- 积分商城 begin -->
					<view v-if="tabNow==1" view class='padding-top-xs grid col-2'>						
						<view v-for="(item,index) in list" v-if="list.length > 0" :key="index" class="padding-xs">
							<view class="cu-list menu-avatar bg-white">								
								<!-- 图片 begin -->
								<bgImg :img="item.img">
									<view class="text-black text-bold text-cut" style="width:100%;position:absolute;bottom:10rpx;left:15rpx;">
										<view class="text-cut text-bold">
											{{item.name}} 
											<text v-if="item.itemCount>0" class="text-sm margin-left">剩余: {{item.itemCount}}</text>
										</view>								
									</view>
								</bgImg>
								<!-- 图片 end -->
															
								<!-- 按钮 begin -->
								<view class="flex flex-direction">
									<button v-if="item.itemCount==0" disabled="" style="border-radius: 0 0 6% 6%;margin:0;" class="cu-btn bg-red margin-tb-sm">抢光了</button>
									<button v-if="item.itemCount>0" @tap="buy(item.id)" style="border-radius: 0 0 6% 6%;margin:0;" class="cu-btn bg-red margin-tb-sm">{{item.price}} 积分兑换</button>
								</view>
								<!-- 按钮 end -->
								
							</view>								
						</view>						
					</view>
					<!-- 列表部分 end -->
					
					<!-- 积分明细 begin -->
					<view v-if="tabNow==2" class="cu-item shadow padding"  v-for="(item,index) in list" :index="index" :item="item" :key="index">
						<view class="flex justify-between">
							<view>
								<text>商品:<text :class="item.task.color">{{item.ext.name}}</text></text>
								<text class="margin-left">花费积分:<text class="text-red margin-lr-xs">{{item.gold}}</text> 点</text>								
							</view>
						</view>
						<view class="text-grey margin-top-sm text-sm flex">
							激活码:<forbid :size="36" :text="item.ext.code"></forbid>
						</view>
						<text class="text-grey margin-top-sm text-sm" style="display: inline-block;">
							兑换时间 : [{{item.createTime}}]
						</text>
					</view>
					<!-- 积分明细 end -->
					
				</view>
			
			</mescroll-uni>
			<!-- 列表部分 end -->
			
			<!-- 积分明细 begin -->
			<scroll-view v-if="tabNow==3" scroll-y="true" style='height:75vh;'>
				<view class="cu-card dynamic">					
						<view class="cu-item shadow"  v-for="(item,index) in list" :index="index" :item="item" :key="index">
							
							<view class="padding-top text-bold padding-bottom-xs padding-left">
								{{item.name}}								
							</view>
							
							<view class="cu-list menu sm-border" >
								<view class="cu-item" v-for="(item1,index1) in item.taskList" :index="index1" :key="index1" >
									<view class="content">
										<image style="height: 36rpx;" :src="item1.img" mode="aspectFit"></image>
										<text class="text-df">{{item1.name}}</text>
									</view>
									<view class="action">
										<text v-if='(item1.id!=9&&item1.id!=10)'>积分 <text :class="'margin-lr-xs'+ (item1.gold<30?' text-yellow':' text-red')">+{{item1.gold}}</text></text>
										<text v-if='item1.id==9'>积分 <text class="margin-lr-xs text-red">+推广用户提成</text></text>
										<text v-if='item1.id==10'>积分 <text class="margin-lr-xs text-red">+抽奖获得积分</text></text>
									</view>
								</view>
							</view>
								
						</view>					
				</view>
			</scroll-view>
			<!-- 积分明细 end -->
			
		</view>
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本
	
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import navLongTab from "@/components/tab/navLongTab.vue"
	import bgImg from '@/components/img-list/bg-img.vue';
	
	import forbid from '@/components/forbidden/forbidden.vue';	
	import scrollList from '@/components/scroll/scroll-list.vue';
	
	import * as confirm from '@/common/confirm.js'	
	import {formatDateTime} from "@/common/util.js"
	
	export default {
		mixins: [MescrollMixin],
		components:{
		        navLongTab,bgImg,forbid,scrollList,MescrollBody
		},
		data() {
			return {
				//初始化函数
				userinfo:{},
				hasPlayLottery:true,
				isGoLuck:false,
				isInit:false,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无经验信息',
					},
					textNoMore:'-- 没有更多经验信息 --',
					toTop:{
						offset:200,
						bottom: '210rpx',
					}
				},
				screenHeight:this.s_h_notb-(this.upx2px*140).toFixed(0),
				list:[],
				tabNow:0,
				
				taskName:'',
				count:0,				
				task:0,
				taskIndex:0,
				task_list:[{name:'全部'}],
				
				tabs:[{name:'积分明细'},{name:'积分商城'},{name:'兑换记录'},{name:'积分任务'}]
			}
		},
		onLoad(){
			this.$api.post('/user/ckIsAuth').then(res => {
				this.userinfo=res.data
				
				this.$api.post('/user/has_play_lottery').then(res => {
					this.hasPlayLottery=res.data
					
					this.$api.post('/common/task_list').then(res => {
						this.task_list=res.data
						this.isInit=true					
					})
					
				})			
			})
		},
		onShow() {
			if(this.isGoLuck){
				this.$api.post('/user/ckIsAuth').then(res => {
					this.userinfo=res.data
					this.$api.post('/user/has_play_lottery').then(res => {
						this.hasPlayLottery=res.data	
					})			
				}).catch(()=>{
					this.hasPlayLottery=true
				}).finally(()=>{
					this.isGoLuck=false
				})
			}
		},
		methods: {
			changeTab(index){
				this.tabNow=index
				this.list=[]
				this.$nextTick(()=>{
					if(index!=3){
						this.mescroll.resetUpScroll();
					}else{
						this.$api.post('/common/task_group').then((res)=>{
							this.list=res.data
						})
					}
				})
			},
			changeTask(type,index){
				if(index!=this.taskIndex){
					this.taskIndex=index
					
					this.taskName=type.value
					
					this.task=type.key
					this.list=[]
					this.$nextTick(()=>{
						this.mescroll.resetUpScroll();
					})
				}
			},
			getDateDiff(date){
				return formatDateTime(new Date(date),'yyyy-MM-dd')
			},
			goLuck(){
				if(this.hasPlayLottery){
					confirm.info("您今天已经参加过抽奖!!!")
				}else{
					this.isGoLuck=true
					uni.navigateTo({
						url:"/pages/my/luck/luck"
					})
				}
			},
			buy(id){				
				confirm.choose("您确定要兑换该商品?积分兑换后无法退回。",()=>{
					this.$api.post('/gold_goods/buy',{id:id}).then((res)=>{
						confirm.info("购买成功，兑换码:"+res.msg)
						this.$nextTick(()=>{
							this.$api.post('/user/ckIsAuth').then(res => {
								this.userinfo=res.data								
								this.$store.commit('CHANGE_USER_INFO',true)
								this.mescroll.resetUpScroll();
							})							
						})
					}).catch((res)=>{
						confirm.warn(res.msg)
					})
				},{},{confirmColor:'grey',cancelColor:'#000000'})
				
			},
			upCallback(page){
				
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"page":pageNum,
					"type":0
				}
				
				let url='/user/gold_page';
				if(this.tabNow==0){
					params.task=this.task
				}
				if(this.tabNow==1){
					url='/gold_goods/list';
				}
				if(this.tabNow==2){
					url='/user/use_gold_page';
				}
				
				this.$api.post(url,params).then(res => {
					let data;
					if(this.tabNow==0){
						data=res.data.list;
						this.count=res.data.count==null?0:res.data.count
					}else{
						data=res.data;
					}
					
					let curPageData = data.records;
					let curPageLen=curPageData.length
					let totalSize=data.total;
					
					if(this.tabNow==0){
						curPageData.forEach((item)=>{
							if(item.task.id==9){
								item.ext=JSON.parse(item.ext)
							}
						})
					}
					
					if(this.tabNow==2){
						curPageData.forEach((item)=>{
							item.ext=JSON.parse(item.ext)
						})
					}
					
					if(page.num == 1) _this.list = []; //如果是第一页需手动置空列表
					_this.list = _this.list.concat(curPageData); //追加新数据
											
					_this.mescroll.endBySize(curPageLen, totalSize);
					
					this.$nextTick(()=>{
						if(!this.isInit){
							this.isInit=true
						}
					})
				})
			},
		}
	}
</script>

<style>

</style>
